<template>
	<view>
		<view class="search-input">
			<input type="uni-input" focus placeholder="请输入商品关键词" @input="doSearch">
		</view>
		<shopList  :productListData="searchData" @changePage="getSearch"></shopList>
	</view>
</template>

<script>
	import shopList from '@/components/shop-list.vue'
	export default {
		components: {
			shopList
		},
		data() {
			return {
				searchData: [],
				keyWord: '',
				page: 1,
				size: 2,
				LoadmoreData: false,
			}
		},
		computed: {
			
		},
		provide() {
			return {
				page: this.page,
				size: this.size,
			}
		},
		methods: {
			doSearch(event) {
				this.keyWord = event.detail.value;
				this.getSearch()
			},
			getSearch(page = 1, size = 2, isMore) {
				/**
				 * 根据关键词搜索商品
				 */
				let that = this
				uni.request({
					// url: 'http://127.0.0.1:8002/search?search=' + that.keyWord + '&page=' + page + '&size=' + size,
					url: `http://127.0.0.1:8002/search?search=${that.keyWord}&page=${page}&size=${size}`,
					method: 'GET',
					success(res) {
						if (isMore) {
							that.searchData.push(...res.data.data)
						} else {
							that.searchData = res.data.data
						}
					},
				})
			}
		}
	}
</script>

<style>
	.search-input {
		padding: 10px 20px;
		margin: 10px 20px;
		box-sizing: border-box;
		border-radius: 100px;
		background-color: rgba(0, 0, 0, 0.02);
	}
</style>
